define("button", (require, exports, module) => {
  exports.button = (dom) => {
    class ESButton extends dom.customElement {
      constructor() {
        super();
        const template = document.createElement("template");
        template.innerHTML = `<slot></slot>`;
        const templateContent = template.content;
        const shadowRoot = this.createShadowRoot();

        const btn = document.createElement("button");
        btn.appendChild(templateContent.cloneNode(true));
        btn.setAttribute("class", "es_button --round");

        this.button = btn;
        const styleElm = document.createElement("style");
        this.styleElm = styleElm;
        shadowRoot.append(styleElm);
        shadowRoot.append(btn);
        this.parseStyle("default");
      }
      type = {
        primary: "#06c",
        warning: "red",
        default: "#f0f0f0",
        disabled: "#e8e8e8",
      };
      sizeType = {
        default: {
          fontSize: "14px",
          padding: "12px 23px",
          borderRadius: "4px",
        },
        medium: {
          fontSize: "14px",
          padding: "10px 20px",
          borderRadius: "4px",
        },
        small: {
          fontSize: "12px",
          padding: "9px 15px",
          borderRadius: "3px",
        },
        mini: {
          fontSize: "12px",
          padding: "7px 15px",
          borderRadius: "3px",
        },
      };
      textContent() {
        return `
        .es_button {
            position: relative;
            margin-right: 3px;
            display: inline-block;
            padding: ${this.sizeType[this.size].padding};
            border-radius: ${
              !this.round ? this.sizeType[this.size].borderRadius : "20px"
            };
            background-color: ${this.type[this.btnType]};
            color: ${this.btnColor};
            outline: none;
            border: none;
            box-shadow: 0 3px 5px rgba(0,0,0, .2);
            cursor: pointer;
            font-size:${this.sizeType[this.size].fontSize};
        }
        .es_button.--round{
            border-radius: ${
              this.round ? "20px" : this.sizeType[this.size].borderRadius
            };
        }
        `;
      }
      parseStyle() {
        this.btnType = this.disabled
          ? "disabled"
          : this.getAttribute("type") || "default";
        this.btnColor =
          this.btnType === "disabled"
            ? "#ccc"
            : this.btnType === "default"
            ? "#333"
            : "#fff";
        this.size = this.getAttribute("size") || "default";
        this.plain =
          this.getAttribute("plain") && this.getAttribute("plain") === "true"
            ? true
            : false;
        this.round = !this.plain
          ? this.getAttribute("round") && this.getAttribute("round") === "true"
            ? true
            : false
          : false;
        this._shadowRoot.querySelector("style").textContent =
          this.textContent();
        this._style &&
          (this.removeAttribute("style"),
          (this.button.style.cssText = this._style));
      }
      connectedCallback() {
        //const id = [new Date().getTime()].join("");
        /* this.button.setAttribute("data-id", id + "-button");
      this.styleElm.setAttribute("data-id", id + "-style"); */
        //dom.children.push({ id, elm: this });
        this.bindDefault();
        this.parseStyle();
      }
    }

    dom.component("es-button", ESButton);
  };
});
